<script setup>
import { ref, watch } from 'vue'
import * as charts from 'echarts'
import { useAirStore } from '@/stores'
import { storeToRefs } from 'pinia'
const airStore = useAirStore()
const { operationData } = storeToRefs(airStore)
const optionData = {
  backgroundColor: 'transparent',
  grid: {
    left: '12%',
    top: '5%',
    bottom: '15%',
    right: '8%'
  },
  tooltip: {
    trigger: 'axis',
    borderColor: '#0F2638',
    backgroundColor: '#0F2638DB',
    textStyle: {
      color: '#fff',
      fontSize: 14
    },
    formatter: function (params) {
      return `<div>${params[0].name}<br/> ${params[0].value} 个</div>`
    }
  },
  xAxis: {
    data: ['', '', '', '', ''],
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 129, 109, 0.1)',
        width: 1 //这里是为了突出显示加上的
      }
    },
    axisLabel: {
      interval: 0,
      rotate: 20,
      textStyle: {
        color: '#999',
        fontSize: 12
      }
    }
  },
  yAxis: [
    {
      splitNumber: 0,
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 129, 109, 0.1)',
          width: 1 //这里是为了突出显示加上的
        }
      },
      axisLabel: {
        interval: 0,
        rotate: 20,
        textStyle: {
          color: '#999'
        }
      },
      splitArea: {
        areaStyle: {
          color: 'rgba(255,255,255,.5)'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 129, 109, 0.1)',
          width: 0.5,
          type: 'dashed'
        }
      }
    }
  ],
  series: [
    {
      type: 'pictorialBar',
      barCategoryGap: '0%',
      symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
      label: {
        show: true,
        position: 'top',
        // distance: 15,
        color: '#fff',
        // fontWeight: "bolder",
        fontSize: 12
      },
      data: [
        {
          value: '',
          itemStyle: {
            color: new charts.graphic.LinearGradient(
              0,
              0,
              0,
              1, // 渐变方向，从上到下
              [
                { offset: 0, color: '#41FFA7' }, // 柱图上端颜色
                { offset: 1, color: 'transparent' } // 柱图下端颜色
              ]
            ),
            borderColor: '#41FFA7',
            borderWidth: 1
          }
        },
        {
          value: '',
          itemStyle: {
            color: new charts.graphic.LinearGradient(
              0,
              0,
              0,
              1, // 渐变方向，从上到下
              [
                { offset: 0, color: '#41FFE1' }, // 柱图上端颜色
                { offset: 1, color: 'transparent' } // 柱图下端颜色
              ]
            ),
            borderColor: '#41FFE1',
            borderWidth: 1
          }
        },
        {
          value: '',
          itemStyle: {
            color: new charts.graphic.LinearGradient(
              0,
              0,
              0,
              1, // 渐变方向，从上到下
              [
                { offset: 0, color: '#22A7FF' }, // 柱图上端颜色
                { offset: 1, color: 'transparent' } // 柱图下端颜色
              ]
            ),
            borderColor: '#22A7FF',
            borderWidth: 1
          }
        },
        {
          value: '',
          itemStyle: {
            color: new charts.graphic.LinearGradient(
              0,
              0,
              0,
              1, // 渐变方向，从上到下
              [
                { offset: 0, color: '#CFFF41' }, // 柱图上端颜色
                { offset: 1, color: 'transparent' } // 柱图下端颜色
              ]
            ),
            borderColor: '#CFFF41',
            borderWidth: 1
          }
        },
        {
          value: '',
          itemStyle: {
            color: new charts.graphic.LinearGradient(
              0,
              0,
              0,
              1, // 渐变方向，从上到下
              [
                { offset: 0, color: '#FF9B41' }, // 柱图上端颜色
                { offset: 1, color: 'transparent' } // 柱图下端颜色
              ]
            ),
            borderColor: '#FF9B41',
            borderWidth: 1
          }
        },
        {
          value: '',
          itemStyle: {
            color: new charts.graphic.LinearGradient(
              0,
              0,
              0,
              1, // 渐变方向，从上到下
              [
                { offset: 0, color: '#cca700' }, // 柱图上端颜色
                { offset: 1, color: 'transparent' } // 柱图下端颜色
              ]
            ),
            borderColor: '#FF9B41',
            borderWidth: 1
          }
        },
        {
          value: '',
          itemStyle: {
            color: new charts.graphic.LinearGradient(
              0,
              0,
              0,
              1, // 渐变方向，从上到下
              [
                { offset: 0, color: '#76521b' }, // 柱图上端颜色
                { offset: 1, color: 'transparent' } // 柱图下端颜色
              ]
            ),
            borderColor: '#FF9B41',
            borderWidth: 1
          }
        },
        {
          value: '',
          itemStyle: {
            color: new charts.graphic.LinearGradient(
              0,
              0,
              0,
              1, // 渐变方向，从上到下
              [
                { offset: 0, color: '#6a9955' }, // 柱图上端颜色
                { offset: 1, color: 'transparent' } // 柱图下端颜色
              ]
            ),
            borderColor: '#FF9B41',
            borderWidth: 1
          }
        }
      ],
      z: 10
    }
  ]
}
const option = ref(optionData)

const setOption = (val) => {
  let data = []
  option.value.xAxis.data = Object.keys(val?.enterprisesMap)
  data = Object.values(val?.enterprisesMap)
  option.value?.series[0].data.forEach((item, index) => {
    item.value = data[index]
  })
}

watch(operationData, (newVal) => {
  setOption(newVal)
})
</script>
<template>
  <div class="card">
    <CommonTitle title="运营企业概况" />
    <div class="unit">个</div>
    <div class="chart">
      <Charts :option="option" container="12" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
  padding: 10px;
  .unit {
    width: 12px;
    height: 30px;
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #a7b1bb;
    line-height: 30px;
    text-align: left;
    font-style: normal;
  }
  .chart {
    width: 100%;
    height: 185px;
  }
}
</style>
